<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品规格</title>
    <link rel="stylesheet" href="{__CSS__}/element_ui.css"/>
    <link rel="stylesheet" href="{__CSS__}/style.css"/>
    <script src="{__JS__}/vue2.js"></script>
    <script src="{__JS__}/element_ui.js"></script>
    <script src="{__JS__}/axios.min.js"></script>
    <script src="{__JS__}/request.js"></script>
</head>
<body>
<div id="app">
    <div class="app-loading" v-if="pageLoading">
        <div class="app-loading__logo">
            <img src="{__IMG__}/logo.png"/>
        </div>
        <div class="app-loading__loader"></div>
        <div class="app-loading__title">{$title}</div>
    </div>
    <el-card class="box-card" v-else>
        <div slot="header" class="clearfix">
            <span>商品规格</span>
        </div>
        <div class="search-box">
            <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                <el-form-item label="商品规格">
                    <el-input v-model="searchForm.name" placeholder="" clearable size="small"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit" size="small" icon="el-icon-search" >查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div style="width:100%;height:0;border-bottom:#E4E7ED 1px dashed;margin-bottom: 10px"></div>
        <el-button type="primary" icon="el-icon-plus" size="small" @click="addAttr" style="margin-top: 10px">添加规格</el-button>
        <div style="width:100%;height:0;border-bottom:#E4E7ED 1px dashed;margin-top: 10px"></div>
        <el-table
                :data="tableData"
                style="width: 100%;">
            <el-table-column
                    type=""
                    prop="id"
                    label="ID">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="规格名">
            </el-table-column>
            <el-table-column
                    label="商品规格">
                <template slot-scope="scope">
                    <p>{{ scope.row.title }}</p>
                </template>
            </el-table-column>
            <el-table-column
                    label="商品规格值">
                <template slot-scope="scope">
                    <p v-for="(item,index) in scope.row.item.split(' | ')" :key="index">{{ item }}</p>
                </template>
            </el-table-column>
            <el-table-column
                    prop="operation"
                    label="操作">
                <template slot-scope="scope">
                    <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button @click="handleDel(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                style="margin-top: 10px"
                background
                layout="->, prev, pager, next"
                :page-size="searchForm.limit"
                @current-change="handlePageChange"
                :total="total">
        </el-pagination>

        <el-dialog :title="title" :visible.sync="dialogVisible" width="900px" :close-on-click-modal="false">
            <el-form :model="form" :rules="rules" ref="ruleForm"  label-width="80px">
                <el-form-item label="模板名称" prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="参数">
                    <el-button type="primary" icon="el-icon-plus" size="small" @click="addRule">新的规格</el-button>
                    <el-table
                            :data="preItem"
                            border
                            style="width: 100%">
                        <el-table-column
                                label="规格名"
                                width="200">
                            <template slot-scope="scope">
                                <el-input placeholder="规格名" style="width: 150px" v-model="scope.row.title"></el-input>
                                <i class="el-icon-delete del-btn" @click="delTitle(scope.$index)"></i>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="规格值">
                            <template slot-scope="scope">
                                <div style="width: 180px;float: left;margin-top: 5px" v-for="(vo,index) in scope.row.item" :key="index">
                                    <el-input placeholder="规格值" style="width: 150px" v-model="scope.row.item[index]"></el-input>
                                    <i class="el-icon-delete del-btn" @click="delItem(scope.$index, index)"></i>
                                </div>
                                <i class="el-icon-plus add-btn" @click="addNewItem(scope.$index)">添加</i>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false" size="small">取 消</el-button>
                <el-button type="primary" @click="optSubmit('ruleForm')" size="small" :loading="loading">确 定</el-button>
            </div>
        </el-dialog>
    </el-card>
</div>

<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                pageLoading: true,
                searchForm: {
                    name: '',
                    limit: 15,
                    page: 1
                },
                dialogVisible: false,
                title: '新增商品规格',
                total: 1,
                tableData: [],
                baseIndex: '/{:config("shop.backend_index")}/',
                dialogCateVisible: false,
                form: {
                    id: 0,
                    name: ''
                },
                ruleItem: {
                    'title': '',
                    'item': ['']
                },
                preItem: [],
                rules: {
                    name: [
                        { required: true, message: '请输入模板名称', trigger: 'blur' }
                    ]
                },
                loading: false
            }
        },
        mounted() {
            this.getList()
            this.pageLoading = false
        },
        methods: {
            // 获取列表
            async getList() {
                let res = await request.get(this.baseIndex + 'goodsRule/index', this.searchForm)
                this.tableData = res.data.data
                this.total = res.data.total
            },
            // 添加规格
            addAttr() {
                this.title = '新增商品规格'
                this.dialogVisible = true
                this.preItem = [];
                this.preItem.push(JSON.parse(JSON.stringify(this.ruleItem)))
            },
            addRule() {
                let item = JSON.parse(JSON.stringify(this.ruleItem))
                this.preItem.push(item)
            },
            // 删除规格标题
            delTitle(index) {
                this.preItem.splice(index, 1);
            },
            // 删除规格
            delItem(tableIndex, index) {
                this.preItem[tableIndex].item.splice(index, 1);
            },
            // 添加新的节点
            addNewItem(index) {
                this.preItem[index].item.push('');
            },
            // 搜索
            onSubmit() {
                this.searchForm.page = 1
                this.getList()
            },
            // 编辑参数
            handleEdit(item) {
                this.title = '编辑商品参数'
                this.dialogVisible = true

                this.form.id = item.id
                this.form.name = item.name
                this.preItem = JSON.parse(item.value)
            },
            // 删除参数
            handleDel(item) {
                this.$confirm('此操作将永久删除该商品规格, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    let res = await request.get(this.baseIndex + 'goodsRule/del', {id: item.id})
                    if (res.code == 0) {
                        this.$message.success(res.msg)
                        this.getList()
                    } else {
                        this.$message.error(res.msg)
                    }
                }).catch(() => {});
            },
            // 分页
            handlePageChange(page) {
                this.searchForm.page = page
                this.getList()
            },
            // 新增或编辑
            optSubmit(formName) {
                this.$refs[formName].validate(async (valid) => {
                    if (valid) {
                        if (this.preItem.length == 0) {
                            this.$message.error('请输入规格')
                            return false;
                        }
                        this.preItem.forEach((item, index) => {
                            this.form['item' + index] = item
                        })

                        this.loading = true
                        let res;
                        if (this.form.id) {
                            res = await request.post(this.baseIndex + 'goodsRule/edit', this.form)
                        } else {
                            res = await request.post(this.baseIndex + 'goodsRule/add', this.form)
                        }
                        this.loading = false
                        if (res.code == 0) {
                            this.dialogVisible = false
                            this.$message.success(res.msg)
                            this.form = {
                                id: 0,
                                name: ''
                            }
                            this.getList()
                        } else {
                            this.$message.error(res.msg)
                        }
                    }
                });
            }
        }
    });
</script>
<style>
    p { padding: 0;
        margin: 0;}
    .el-table__header tr,
    .el-table__header th {
        padding: 0;
        height: 20px;
        line-height: 20px;
    }
    .del-btn {cursor: pointer;color: #F56C6C}
    .add-btn {cursor: pointer;margin-top: 18px;color: #409EFF}
</style>
</body>
</html>